<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

    <!-- Don't use this in production: -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>

<body>
    <div id="root"></div>

    <script type="text/babel">
        const [useState, useMemo, memo, useRef] = React;
        /*
            重新缓存的情况：
                props属性改变
                state组间中的状态改变
                useContex的值改变
        */
        const Child = memo(() => {
            console.log('子组间-渲染')
            return <h2> 子组间 </h2>
        })

        // function MyApp() {
        //     const [x, setX] = useState(0)
        //     const arr = ['a', 'b', 'c'] // 数据
        //     // const fn = () => { } // 操作数据的方法  重新渲染时，函数的内存地址不一样，因此memo不会生效
        //     const fn = useCallback(() => { }, []) // 使用useCallback缓存函数
        //     console.log('父组件-渲染')

        //     return <>
        //         <h1 onClick={() => setX(x + 1)} > 父组件 </h1>
        //         <Child arr={arr} fn={fn} />
        //     </>
        // }

        // function MyApp() {
        //     const [x, setX] = useState(1)
        //     const [y, setY] = useState(1)

        //     console.time('xxxx')
        //     let a = useMemo(() => {
        //         let a = 0
        //         for (let j = 0; j < 1000000000; j++) {
        //             a += y;
        //         }
        //         return a
        //     }, [y]) // []添加依赖项

        //     console.timeEnd('xxxx')

        //     return <>
        //         <h1> x:{x} </h1>
        //         <h1> y:{y} </h1>
        //         <h1> a:{a} </h1>

        //         <button onClick={() => setX(x + 1)} > x+1</button>
        //         <button onClick={() => setX(y + 1)} > y+1</button>
        //     </>
        // }



        function MyApp() {
            const [x, setX] = useState(0)
            // const arr = ['a', 'b', 'c'] // <Child arr={arr} />  是否也会重新渲染，因为arr重新定义，重新申请内存

            // 只需要简单缓存，不会再次渲染
            // const arr = useMemo(() => ['a', 'b', 'c']) 
            const [arr, setArr] = useState(['a', 'b', 'c'])
            console.log('父组件-渲染')

            return <>
                <h1 onClick={() => setX(x + 1)} > 父组件 </h1>
                <Child arr={arr} />
            </>
        }

        // 浏览器DOM对象
        const container = document.getElementById('root');
        // 浏览器DOM对象转换成reactDOM对象
        const root = ReactDOM.createRoot(container);
        root.render(<MyApp />);

        console.log(root);

    </script>

</body>

</html>